<template>
	<view class="cate">
		<!-- 商品分类列表 -->
		<view class="play-list">
			<view class="item" 
				v-for="(category, index) in categories" 
				:key="index"
				:class="{ active: currentCategory === category.id }" 
				@tap="selectCategory(category.id)">
				{{ category.name }}
			</view>
		</view>
		<!-- 游玩列表 -->
		<scroll-view class="play-items" scroll-y>
			<view class="item2" v-for="(item, index) in playItems" :key="index" @tap="nav(index)">
				<view class="pic">
					<image class="item-image" mode="aspectFill" :src="item.url" />
				</view>
				<view class="msg">
					<view class="name">{{ item.name }}</view>
					<view class="intro">{{ item.intro }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { CONFIG } from '../../utils/config';

	const currentCategory = ref('play'); // 当前选中的分类标识符
	const playList = ref([]);
	const playItems = ref([]);

	const categories = ref([
		{ id: 'play', name: '游玩' },
		{ id: 'food', name: '美食' },
		// 可以在这里添加第三个分类
	]);

	onLoad(() => {
		getPlayItems('play'); // 默认加载游玩列表
	});

	

	async function getPlayItems(category) {
		if (category === 'play') {
			let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/play");
			console.log(res);
			playItems.value = res.results;
		} else if (category === 'food') {
			let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/play2");
			console.log(res);
			playItems.value = res.results;
		}
		// 可以在这里添加第三个分类的请求逻辑
	}

	function selectCategory(id) {
		currentCategory.value = id; // 更新当前选中的分类标识符
		getPlayItems(id); // 根据选中的分类标识符请求数据
	}
	
	// 点击景点
	function nav(index){
		console.log("点击了景点"+index)
		// 跳转
		uni.navigateTo({
			url:"/pages/details/details?id="+index
		})
	}
</script>

<style scoped>
	.cate {
		padding: 10px;
		/* 内边距 */
		background-color: #f9f9f9;
		/* 导航栏背景色 */
	}

	.play-list {
		display: flex;
		/* 使用 flexbox 布局 */
		overflow-x: auto;
		/* 允许横向滚动 */
		justify-content: center;
		/* 水平居中 */
	}

	.item {
		margin-right: 15px;
		/* 项目之间的间距 */
		font-size: 16px;
		/* 字体大小 */
		color: #333;
		/* 默认字体颜色 */
		cursor: pointer;
		/* 指针效果 */
		transition: color 0.3s, border-bottom 0.3s;
		/* 过渡效果 */
	}

	.item:hover {
		color: #007AFF;
		/* 悬停时字体颜色 */
	}

	.item.active {
		color: #007AFF;
		/* 选中状态字体颜色 */
		border-bottom: 2px solid #007AFF;
		/* 选中状态下方边框 */
	}

	.play-items {
		margin-top: 10px;
		/* 游玩列表的上间距 */
	}

	.item2 {
		display: flex;
		/* 使用 flex 布局 */
		margin-bottom: 15px;
		/* 每个商品之间的间距 */
		padding: 10px;
		/* 内边距 */
		background-color: #ffffff;
		/* 商品项背景色 */
		border-radius: 8px;
		/* 圆角 */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
	}

	.pic {
		flex: 0 0 80px;
		/* 固定宽度 */
	}

	.item-image {
		width: 100%;
		/* 填满容器 */
		height: 80px;
		/* 固定高度 */
		border-radius: 5px;
		/* 圆角 */
	}

	.msg {
		flex: 1;
		/* 占满剩余空间 */
		padding-left: 10px;
		/* 左间距 */
	}

	.name {
		font-size: 16px;
		/* 名字字体大小 */
		font-weight: bold;
		/* 加粗 */
		color: #333;
		/* 文字颜色 */
	}

	.intro {
		font-size: 14px;
		/* 介绍字体大小 */
		color: #666;
		/* 文字颜色 */
	}
</style>